import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import pathOr from 'ramda/es/pathOr';
import s from './LeafNodeInfo.module.css';
import { datetime } from '../../../../../common/formatter';
import Tooltip from '@kuiper-components/tooltip';
import copy from 'copy-to-clipboard';
import notification from '@kuiper-components/notification';
import Suggest from '../../../Weakness/WarningDetail/Suggest';

export default function LeafNodeInfo({ className, nodeInfo }) {
	if (!nodeInfo) {
		return (
			<div className={cn(className, s.leafNodeInfo)}>
				<div className={s.empty}>
					<svg
						width="116"
						height="150"
						viewBox="0 0 116 150"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							fillRule="evenodd"
							clipRule="evenodd"
							d="M36.2281 0C34.3412 0 32.7109 1.31861 32.3165 3.16381L31.0689 9H6C2.68629 9 0 11.6863 0 15V143C0 146.314 2.68629 149 6 149H104C107.314 149 110 146.314 110 143V15C110 11.6863 107.314 9 104 9H78.9344L77.6912 3.16626C77.2977 1.31989 75.6668 0 73.779 0H36.2281Z"
							fill="var(--color-border-1)"
						/>
						<rect
							x="5"
							y="14"
							width="100"
							height="130"
							rx="4"
							fill="var(--color-bg)"
						/>
						<rect
							x="10"
							y="28"
							width="49"
							height="6"
							rx="1"
							fill="var(--color-border-2)"
						/>
						<rect
							x="10"
							y="44"
							width="80"
							height="6"
							rx="1"
							fill="var(--color-border-2)"
						/>
						<rect
							x="10"
							y="92"
							width="80"
							height="6"
							rx="1"
							fill="var(--color-border-2)"
						/>
						<rect
							x="10"
							y="60"
							width="66"
							height="6"
							rx="1"
							fill="var(--color-border-2)"
						/>
						<rect
							x="10"
							y="108"
							width="66"
							height="6"
							rx="1"
							fill="var(--color-border-2)"
						/>
						<rect
							x="10"
							y="76"
							width="53"
							height="6"
							rx="1"
							fill="var(--color-border-2)"
						/>
						<rect
							x="10"
							y="124"
							width="31"
							height="6"
							rx="1"
							fill="var(--color-border-2)"
						/>
						<path
							fillRule="evenodd"
							clipRule="evenodd"
							d="M89.7485 111.918C89.0696 111.081 89.1763 109.856 89.9898 109.149L93.8527 105.791C94.6711 105.08 95.9075 105.15 96.6399 105.95L114.204 125.132C114.964 125.961 114.89 127.254 114.041 127.992L108.999 132.375C108.145 133.117 106.846 133.004 106.133 132.125L89.7485 111.918Z"
							fill="var(--color-5)"
						/>
						<circle
							cx="73.8152"
							cy="87.4341"
							r="27.5"
							transform="rotate(-41 73.8152 87.4341)"
							stroke="var(--color-5)"
							strokeWidth="3"
							fill="none"
						/>
						<circle
							opacity="0.664756"
							cx="73.8389"
							cy="87.5561"
							r="26"
							transform="rotate(-41 73.8389 87.5561)"
							fill="var(--color-bg)"
						/>
					</svg>
					<div className={s.emptyMsg}>请选择文件查看具体信息</div>
				</div>
			</div>
		);
	}

	const infoOverlay = (
		<p className={s.infoOverlay}>
			<span>
				{Array.isArray(nodeInfo.example) ? (
					nodeInfo?.example?.map(x => (
						<div key={x} className={s.example}>
							{x}
						</div>
					))
				) : (
					<div className={s.example}>
						{nodeInfo?.path?.length > 0 && nodeInfo?.path?.reduce((str, x, i) => {
							if (i % 2 === 0) return str + '/';
							return str + x;
						})}
					</div>
				)}
			</span>
			<span>点击即可复制</span>
		</p>
	);

	const nodeRef = React.useRef();
	const handleCopyText = () => {
		if (copy(nodeRef?.current?.innerText)) {
			notification.success({
				message: '内容已复制！',
				style: { width: '13rem' },
				placement: 'center',
			});
		} else {
			notification.error({
				message: '内容复制失败，请手动复制。',
				placement: 'center',
			});
		}
	};

	return (
		<div className={cn(className, s.leafNodeInfo)}>
			<div className={s.item}>
				<span className={s.label}>文件名：</span>
				<span className={s.value}>{nodeInfo?.value}</span>
			</div>
			<div className={s.item}>
				<span className={s.label}>文件类型：</span>
				<span className={s.value}>
					{nodeInfo?.contentTypeMap && Object.keys(nodeInfo?.contentTypeMap || {})?.map(x => (
						<span key={x}>{pathOr(x, [1], x.split('/')).toUpperCase()}</span>
					)) || '- -'}
				</span>
			</div>
			<div className={s.item}>
				<span className={s.label}>绝对路径：</span>
				{nodeInfo?.path?.length > 0 && <Tooltip placement="top" overlay={infoOverlay}>
					<span
						className={[s.value, s.copyValue]}
						ref={nodeRef}
						onClick={handleCopyText}
					>
						{Array.isArray(nodeInfo?.example) ? (
							nodeInfo?.example?.map(x => (
								<div key={x} className={s.example}>
									{x}
								</div>
							))
						) : (
							<div className={s.example}>
								{nodeInfo?.path?.length > 0 && nodeInfo?.path?.reduce((str, x, i) => {
									if (i % 2 === 0) return str + '/';
									return str + x;
								})}
							</div>
						)}
					</span>
				</Tooltip> || <div className={s.value}>- -</div>}
			</div>
			<div className={s.item}>
				<span className={s.label}>发现时间：</span>

				{nodeInfo?.firstTime && (nodeInfo?.change === 'add' ? (
					<span className={cn(s.value, s.safe)}>
						{datetime(nodeInfo?.firstTime)}（新增）
					</span>
				) : (
					<span className={s.value}>{datetime(nodeInfo?.firstTime)}</span>
				)) || <span className={cn(s.value)}>- -</span>}
			</div>

			<div className={s.item}>
				<span className={s.label}>安全状态：</span>

				{nodeInfo?.warnings ? (
					<span className={cn(s.value, s.abnoraml)}>异常</span>
				) : (
					<span className={cn(s.value, s.safe)}>安全</span>
				)}
			</div>
			<div className={s.item}>
				<span className={s.label}>异常详情：</span>
				{nodeInfo?.warnings ? (
					<span className={cn(s.value, s.abnoramlValue)}>
						<span className={s.abnoramlTitle}>{nodeInfo?.warnings?.title}</span>
						<Suggest
							title={nodeInfo?.warnings?.title}
							{...(nodeInfo?.warnings || {})}
							taskType="vul"
						>
							<span className={s.showDetail}>查看异常详情</span>
						</Suggest>
					</span>
				) : (
					<span className={s.value}>暂无</span>
				)}
			</div>
		</div>
	);
}

LeafNodeInfo.propTypes = {
	className: PropTypes.string,
	nodeInfo: PropTypes.shape({
		value: PropTypes.string.isRequired,
		contentTypeMap: PropTypes.shape({}),
		detail: PropTypes.shape({}),
		example: PropTypes.arrayOf(PropTypes.string),
		firstTime: PropTypes.number.isRequired,
		warnings: PropTypes.arrayOf(
			PropTypes.shape({
				title: PropTypes.string.isRequired,
			})
		),
		change: PropTypes.string,
		path: PropTypes.arrayOf(PropTypes.string).isRequired,
	}),
};

LeafNodeInfo.defaultProps = {
	className: s.leafNodeInfo,
};
